<!-- Vue3 语法 -->
<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>
<script setup name="Person">
import { ref } from "vue";
/**
 * setup中this是undefined,Vue3已经开始弱化this.
 * 数据, 原来是写在data中的此时的name,age,tel都不是响应式的数据.
 * ---
 * 响应式数据需要使用ref包裹,js/ts修改响应式数据需要使用.value获取其值后进行修改.
 */
let name = ref("张三"); // 此时 name 不是响应式
let age = ref(18); // 此时 age 不是响应式
let tel = "13888888888"; // 此时 tel 不是响应式



// 方法
function changeName() {
  // 注意: 这样修改name,页面没有变化,name确实改了,但name不是响应式的
  name.value = "zhang-san";
}
function changeAge() {
  // 注意: 这样修改age,页面没有变化,age确实改了,但age不是响应式的
  age.value += 1;
}
function showTel() {
  alert(tel);
}
</script>

<style>
button {
  margin: 0 5px;
}
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>
